import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
import React from 'react';
import Example from './Example';
import Example2 from './Example2';
import ExampleEffect from './ExampleEffect';
import ExampleEffectj from './ExampleEffectj';
import ExampleContext from './ExampleContext';
import ExampleReducer from './ExampleReducer';
import CombinationIndex from './ReducerContextRedux/CombinationIndex'
import ExampleUseDemo from './ExampleUseDemo'
import ExampleUseRef from './ExampleUseRef'
import ExampleEnd from './ExampleEnd'

function AppRouter(){
    return(
      <Router>
          <ol>
              <li>
                <p>useState =><sub><Link to='/Example'>Example 单个useState</Link></sub>OR <sub><Link to='/Example2'>Example2 多个useState</Link></sub></p>
              </li>
              <li>
                <p>useEffect =><sub><Link to='/ExampleEffect'>ExampleEffect useEffect初始化</Link></sub>OR <sub><Link to='/ExampleEffectj'>ExampleEffectj useEffect实现componentWillUnmount</Link></sub></p>
              </li>
              <li>
                <p>useContext =><sub><Link to='/ExampleContext'>ExampleContext 初始化父子组件传值</Link></sub></p>
              </li>
              <li>
                  <p>useReducer =><sub><Link to='/ExampleReducer'>ExampleReducer 和reducer相似</Link></sub></p>
              </li>
              <li><Link to='/CombinationIndex'><p>实例  useReducer he useContext 组合成redux </p></Link></li>
              <li><Link to='/ExampleUseDemo'><p>实例  useMemo 解决父随子更新 </p></Link></li>
              <li><Link to='/ExampleUseRef'><p>实例  useRef 操作dom元素,保存变量 </p></Link></li>
              <li><Link to='/ExampleEnd'><p>自定义hooks函数并使用useCallback </p></Link></li>
          </ol>       
        <hr/>
        <main>
            <h1>内容</h1>
            <Route path='/Example' component={Example} />
            <Route path='/Example2' component={Example2} />
            <Route path='/ExampleEffect' component={ExampleEffect} />
            <Route path='/ExampleEffectj' component={ExampleEffectj} />
            <Route path='/ExampleContext' component={ExampleContext} />
            <Route path='/ExampleReducer' component={ExampleReducer} />
            <Route path='/CombinationIndex' component={CombinationIndex} />
            <Route path='/ExampleUseDemo' component={ExampleUseDemo} />
            <Route path='/ExampleUseRef' component={ExampleUseRef} />
            <Route path='/ExampleEnd' component={ExampleEnd} />
        </main>
      </Router>
    )
  }

  export default AppRouter;